<script setup lang="ts">
import RouteHelper from '@core/utils/RouteHelper';
import SubViewContainer from '@core/components/subLayout/SubViewContainer.vue';
import SecPolicy, { RuleDetail } from '@firewall/engine/SecPolicy';

const { t } = useI18n({ inheritLocale: true, useScope: 'local' });

const route = useRoute();
const router = useRouter();
const rule = reactive({} as Partial<RuleDetail>);
onMounted(async () => {
  const firewallId = RouteHelper.queryValueToSingular(route.params.firewallId);
  const ruleId = RouteHelper.queryValueToSingular(route.params.ruleId);
  if (!firewallId || !ruleId) {
    return;
  }
  const secPolicy = await SecPolicy.fetchOne({ firewallId, ruleId });
  Object.assign(rule, secPolicy);
});
const onStatusSwitch = (ruleId: string, value: string) => {
  if (!rule.firewallId) {
    return;
  }
  SecPolicy.changeStatus({ firewallId: rule.firewallId, ruleId, status: value });
};
</script>

<template>
  <SubViewContainer>
    <ElButton class="back" @click="router.back()">{{t('back')}}</ElButton>
    <ElTable
      style="width: 100%;"
      :data= "[rule]"
    >
      <ElTableColumn prop="priority" :label="t('priority')"  />
      <ElTableColumn prop="ruleId" :label="t('ruleName')"  />
      <ElTableColumn prop="srcIp" :label="t('sourceIp')" />
      <ElTableColumn prop="dstIp" :label="t('destinationIp')" />
      <ElTableColumn prop="srcPort" :label="t('sourcePort')" />
      <ElTableColumn prop="dstPort" :label="t('destinationPort')" />
      <ElTableColumn prop="service" :label="t('proto')" />
      <ElTableColumn prop="appName" :label="t('application')" />
      <ElTableColumn prop="action" :label="t('action')" />
      <ElTableColumn prop="policyDesc" :label="t('description')" />
      <ElTableColumn prop="status" :label="t('openStatus')">
        <template  #default="scope">
          <ElSwitch
            :model-value="scope.row.status"
            inline-prompt
            :active-text="t('turnOn')"
            :inactive-text="t('turnOff')"
            active-value="enable"
            inactive-value="disable"
            @change="( value: string ) => { onStatusSwitch(scope.row.ruleId, value)}"
          />
        </template>
      </ElTableColumn>
    </ElTable>
  </SubViewContainer>
</template>
<i18n lang="yaml" locale="zh-CN">
  back: '返回'
  priority: '优先级'
  ruleName: '名称'
  sourceIp: '源IP地址'
  destinationIp: '目的IP地址'
  sourcePort: '源端口'
  destinationPort: '目的端口'
  proto: '协议'
  application: '应用'
  action: '动作'
  description: '描述'
  openStatus: '启用状态'
  turnOn: '开'
  turnOff: '关'
</i18n>
<style scoped>
.back {
  margin-bottom: 5px;
}
</style>
